<!--
  适配的模态窗口组件，用于弹框显示前端Vue页面

  用法：
    <qm-modal
      v-model="modalVisible"
      :path="path"
      :resize="resize"
      :width="width"
      :height="height"
      :title="title"
      :showFooter="showFooter"
      :params="params"
      @modal-close="close"
    >
      <template v-slot:footer>
        <slot name="footer"></slot>
      </template>
    </qm-modal>

  说明：
    v-model：绑定一个boolean值，用来显示或隐藏窗口；
    path：必须是views目录下的vue页面真实绝对路径；
    params：传递参数；
-->
<template>
  <vxe-modal
    ref="xModal"
    v-model="visible"
    :resize="resize"
    :width="width"
    :height="height"
    :title="modalTitle"
    show-zoom
    destroy-on-close
    :showFooter="showFooter"
    :loading="loading"
    @close="close"
  >
    <component
      v-if="visible"
      :is="content"
      v-bind="conprops"
      @modal-close="hide"
      :key="path"
      @loaded="loaded"
      @hook:mounted="loaded"
      ref="content"
    ></component>
    <slot></slot>
    <template v-slot:footer>
      <slot name="footer"></slot>
    </template>
  </vxe-modal>
</template>

<script>
import _ from "lodash";
import qs from "qs";

export default {
  name: "qm-modal",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    showFooter: {
      //是否默认聚焦
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      required: true,
    },
    path: {
      type: String,
      required: true,
    },
    resize: {
      type: Boolean,
      default: true,
    },
    width: {
      type: Number | String,
      default: 1100,
    },
    height: {
      type: Number | String,
      default: 650,
    },
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      visible: this.value,
      loading: false,
      timeout: null,
      modalTitle: this.title,
    };
  },
  computed: {
    conprops() {
      return _.extend({ showAppLoading: false }, this.params);
    },
    content() {
      let vpath = this.getViewPath();
      return (resolve) => require(["@/views" + vpath], resolve);
    },
  },
  watch: {
    value(v) {
      if (this.visible != v) {
        this.visible = v;
      }
      v && this.setLoading();
    },
    title(v) {
      this.modalTitle = v;
    },
  },
  methods: {
    substringEnd(str, start, char) {
      let end = str.indexOf(char);
      if (end > -1) {
        return str.substring(start, end);
      }
      return str.substring(start);
    },
    getViewPath() {
      let vpath = this.path;
      let pageCode = undefined;
      if (this.path.startsWith("/smartform/hub/")) {
        vpath = "/smartform/smartForm/render";
        pageCode = this.substringEnd(this.path, 15, "?");
      }
      if (this.path.startsWith("/smartform/view/")) {
        vpath = "/smartform/smartForm/viewRender";
        pageCode = this.substringEnd(this.path, 16, "?");
      }
      if (this.path.startsWith("/smartform/workflow/")) {
        vpath = "/smartform/smartForm/workflow";
        pageCode = this.substringEnd(this.path, 20, "?");
      }
      if (this.path.startsWith("/attachment/upload")) {
        vpath = "/attachment/upload";
        let p = this.substringEnd(this.path, vpath.length, "?");
        this.params = _.extend(
          this.params,
          qs.parse(p, { ignoreQueryPrefix: true })
        );
      }
      if (pageCode) {
        this.params = this.params || {};
        this.params.pageCode = pageCode;
      }
      this.params = this.params || {};
      this.params._modal = true;
      if (vpath.indexOf("?") > -1) {
        vpath = vpath.substr(0, vpath.indexOf("?"));
      }
      return vpath;
    },
    show() {
      this.visible = true;
      this.$emit("input", true);
    },
    // 该方法可能导致弹窗关了之后打不开
    hide() {
      this.visible = false;
      this.$emit("input", false);
      this.$emit("modal-close", this.$refs.content.$data);
    },
    close(e) {
      e.$event.stopPropagation();
      this.$emit("input", false);
      this.$emit("modal-close", this.$refs.content.$data);
    },
    loaded(title) {
      if (title) {
        this.modalTitle = title;
      }
      if (this.path.toLowerCase().startsWith("/smartform")) {
        this.modalTitle = this.$refs.content.controlData.title;
      }
      if (this.$refs.content.pageActionText) {
        this.modalTitle =
          this.$refs.content.pageActionText + (this.modalTitle || "");
      }

      this.loading = false;
      if (this.timeout) {
        window.clearTimeout();
        this.timeout = null;
      }
    },
    setLoading() {
      if (this.timeout) {
        window.clearTimeout();
      }
      this.loading = true;
      // 如果页面加载超过15秒则自动关闭加载中
      this.timeout = window.setTimeout(() => {
        this.loading = false;
      }, 15 * 1000);
    },
  },
  created() {
    this.setLoading();
  },
  mounted() {
    this.$once("hook:beforeDestroy", () => {
      if (this.timeout) {
        window.clearTimeout();
        this.timeout = null;
      }
    });
  },
};
</script>

<style></style>
